<!--<div class="container">-->

<form class="form-horizontal" id="post_new_attribute" method="post_new_attribute" action="<?=base_url('attributes/submit_post')?>" name="post">

    <input type="hidden" value="NEW" name="post_action">
    <input type="hidden" value="1" name="custom">

    <fieldset>

        <div class="group">

            <span class="group-title">ATTRIBUT DETAILS</span>             

            <div class="control-group">

                <label class="control-label">Attribute value:</label>

                <div class="controls docs-input-sizes">

                    <select class="span3" name="value" id="value" tabindex="1">

                        <option value="0">--Please Select</option>
                        <option value="yes/no">yes/no</option>
                        <option value="area">area</option>
                        <option value="distance">distance</option>
                        <option value="numeric data">numeric data</option>
                        <option value="descriptive data">descriptive data</option>
                        <option value="date">date</option>

                    </select>

                </div>

            </div>        

        </div>

        <div class="group">

            <span class="group-title">NAME</span>             

            <div class="control-group">

                <label class="control-label">Attribute name:</label>

                <div class="controls docs-input-sizes">

                    <input type="text" class="input-xlarge" name="name" id="name" tabindex="2">

                </div>

            </div>        

        </div>

        <div class="group">

            <span class="group-title">OPTIONS</span>             

            <div class="control-group">

                <label class="control-label">Required:</label>

                <div class="controls">

                    <label class="checkbox inline">

                        <input type="checkbox" value="1" name="required" id="required" tabindex="3">

                    </label>

                </div>

            </div>        

        </div>

        <div id="validation_error"></div> 

        <div class="form-actions">

            <img id="ajax-loading" class="ajax-loading" src="<?=base_url()?>assets/img/backgnds/loading.gif" style="visibility: hidden;">

            <button class="btn btn-primary" type="submit" tabindex="4">Save changes</button>
            <button class="btn" tabindex="5" id="cancel">Cancel</button>

            <a class="btn btn-mini" title="Add Attribute" id="new_attribute" onclick="popup_box({url: base_url+'attributes/view_new_from_object/'+jQuery('#type').val()});return false;"><i class="icon-plus"></i></a>
        </div>

    </fieldset>

</form>

<!--</div>-->

<script>

    jQuery(document).ready(function() {       

            //check dropdown methot - valdation
            $.validator.addMethod("check_item_dropdown", function(value, element) {  
                    return this.optional(element) || value != 0  ;   
                }, "Please select an item from the dropdown list.");

            // Override default error message
            jQuery.validator.messages.required = "";   

            // Override generation of error label
            jQuery("#post_new_attribute").validate({

                    rules: {

                        //General
                        value: { check_item_dropdown: true },
                        name: "required"

                    }, 

                    highlight: function(element) {

                        //console.log(element.name)
                        $(element).parent().parent().addClass("error");

                    },
                    unhighlight: function(element) {

                        $(element).parent().parent().removeClass("error");

                    },

                    submitHandler: function(form) {

                        $('button[type=submit]').attr('disabled', 'disabled');

                        $('#ajax-loading').css('visibility','visible');

                        var form = $("#post_new_attribute");
                        var form_data = form.serialize();

                        $.ajax({
                                url: form.attr('action'),
                                dataType: 'json',
                                type: "POST",
                                data: form_data,
                                success: function (data, textStatus, xhr) {

                                    jQuery('#ajax-loading').css('visibility','hidden');

                                    if(data.action==true){

                                        jQuery('.form-actions').append('&nbsp;&nbsp;&nbsp;'+data.msg);                                      

                                        $('#attributes_ID').append(
                                            $('<option></option>').val($('#name').val()).html($('#name').val())
                                        );

                                        // REDIRECT
                                        function promo_show(){
                                            //$('#myModal'+window.modal_id).modal('hide');
                                            $('#bpopup').bPopup().close();
                                        }
                                        window.setTimeout(function() { promo_show(); }, 1001);


                                    }else{

                                        $('button[type=submit]').removeAttr('disabled');
                                        $('#validation_error').html(error(data.msg,'error'));
                                    }
                                },
                                error: function (xhr, textStatus, errorThrown) {
                                    alert('Error ocured...\n'+xhr+'\n'+textStatus+errorThrown+'\n');
                                    $('button[type=submit]').removeAttr('disabled'); 
                                    $('#ajax-loading').css('visibility','hidden');
                                }
                        });

                    },
                    errorPlacement: function(error, element){}
            });

            //helper function - alert
            function error(string,type)
            {
                html = '<div class="alert alert-'+type+' clearfix">'
                '<button type="button" class="close" data-dismiss="alert">&times;</button>'
                html+= string; 
                html+= '</div>';
                return html;  
            }

            // enable form submit button
            $('button[type=submit]').removeAttr('disabled'); 

            //cancel button
            $('#cancel').live('click',function(){
                    window.location.href = base_url+'<?=$page?>/view_all'; 
                    return false;
            })

    });

</script>
